<template>
  <div class="choose-issuing-wrap">
    <el-form-item label="活动选择">
      <!-- <el-input
                :value="multipleSelection.map(x => x.name).join(' , ')"
                placeholder="请选择活动"
                @focus="openChooseActivityDialog"/> -->
      <el-input
        :value="multipleSelectionData?multipleSelectionData.name:''"
        placeholder="请选择活动"
        @focus="openChooseActivityDialog"
      />
    </el-form-item>
    <el-dialog
      title="活动选择"
      :visible.sync="chooseActivityDialog"
      :close-on-click-modal="false"
      width="70%"
    >
      <div>
        <el-form
          ref="form"
          label-width="100px"
          class="form"
          :model="searchData"
        >
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item
                label="活动名称"
                prop="activityName"
              >
                <el-input
                  v-model.trim="searchData.activityName"
                  placeholder="活动名称/关键词"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="活动编号"
                prop="liveno"
              >
                <el-input
                  v-model.trim="searchData.liveno"
                  placeholder="活动编号/关键词"
                />
              </el-form-item>
            </el-col>
            <!-- 新加 -->
            <el-col :span="6">
              <el-form-item
                label="ID"
                prop="scactivityid"
              >
                <el-input
                  v-model.trim="searchData.scactivityid"
                  placeholder="ID/关键词"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="发货类型"
                prop="deliveryType"
              >
                <el-select v-model="searchData.deliveryType">
                  <el-option
                    v-for="item in deliverTypes"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="开始时间"
                prop="startTime"
              >
                <el-date-picker
                  v-model="searchData.startTime"
                  type="daterange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="结束时间"
                prop="endTime"
              >
                <el-date-picker
                  v-model="searchData.endTime"
                  type="daterange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="是否每日截单"
                prop="isEverydayCutOrder"
              >
                <el-select
                  v-model="searchData.isEverydayCutOrder"
                  clearable
                >
                  <el-option
                    v-for="item in everydayCutOrder"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="活动状态"
                prop="activityStatus"
              >
                <el-select
                  v-model="searchData.activityStatus"
                  clearable
                >
                  <el-option
                    v-for="item in activityStatus"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="发货状态"
                prop="deliveryStatus"
              >
                <el-select
                  v-model="searchData.deliveryStatus"
                  clearable
                >
                  <el-option
                    v-for="item in deliverStatus"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="物流公司"
                prop="logisticsCompany"
              >
                <el-select
                  v-model="searchData.logisticsCompany"
                  clearable
                >
                  <el-option
                    v-for="item in expressList"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="display: flex; justify-content: flex-end; padding-bottom: 20px">
            <el-button
              type="primary"
              @click="onSearch"
            >
              查询
            </el-button>
            <el-button
              type="info"
              @click="onReset"
            >
              重置
            </el-button>
          </div>
        </el-form>
        <el-table
          :data="tableData"
          highlight-current-row
          :v-loading="loading"

          height="300px"
          @current-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection"
                                     fixed="left"
                                     width="55"/> -->
          <el-table-column
            prop="merchantName"
            align="center"
            label="商家"
          />
          <el-table-column
            prop="liveno"
            align="center"
            label="活动编号"
          />
          <el-table-column
            prop="scactivityid"
            align="center"
            label="活动ID"
          />
          <el-table-column
            prop="name"
            align="center"
            :min-width="200"
            label="活动名称"
          />
          <el-table-column
            prop="begintime"
            align="center"
            min-width="120"
            label="活动开始时间"
          />
          <el-table-column
            prop="endtime"
            align="center"
            min-width="120"
            label="活动结束时间"
          />
          <el-table-column
            prop="brandName"
            align="center"
            label="品牌名称"
          />
        </el-table>
        <div>
          <el-pagination
            :total="total"
            :current-page.sync="searchData.pageNum"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size.sync="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="chooseActivityDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as activitiesService from '@/api/product_ofc/activities/activities.js';
import * as baseService from '@/api/product_ofc/base/base.js';

export default {
  name: 'ChooseIssuingBay',
  model: {
    prop: 'selectedBrands',
    event: 'update'
  },
  props: {
    pickedBrands: {
      type: Array,
      default: () => []
    },
    maxPicked: {
      type: Number,
      default: () => 100
    }
  },
  data() {
    return {
      chooseActivityDialog: false,
      loading: false,
      multipleSelection: [],
      multipleSelectionData: null,
      tableData: [],
      total: 0,
      searchData: {
        activityName: '',
        activityCode: '',
        startTime: '',
        endTime: '',
        deliveryType: '',
        isEverydayCutOrder: '',
        activityStatus: '',
        deliveryStatus: '',
        logisticsCompany: null,
        pageNum: 1,
        pageSize: 10
      },
      everydayCutOrder: [
        {
          key: 0,
          value: '否'
        },
        {
          key: 1,
          value: '是'
        }
      ],
      deliverTypes: [],
      activityStatus: [],
      deliverStatus: [],
      expressList: [],
    };
  },
  mounted() {
    if (this.pickedBrands.length) {
      this.selectedBrands = this.pickedBrands;
    }
    this.getData();
    this.getActivityStatus();
    this.getStatusDelivery();
    this.getDeliveryTypes();
    this.getSelect();
  },
  methods: {
    getData() {
      const { startTime, endTime, ...other } = this.searchData;
      let startTime1 = '';
      let startTime2 = '';
      let endTime1 = '';
      let endTime2 = '';
      if (startTime && startTime.length) {
        startTime1 = startTime[0];
        startTime2 = startTime[1];
      }
      if (endTime && endTime.length) {
        endTime1 = endTime[0];
        endTime2 = endTime[1];
      }
      const params = {
        ...other,
        startTime1,
        startTime2,
        endTime1,
        endTime2,
      };
      this.loading = true;
      activitiesService.getActivityList(params).then((res) => {
        const { code, data, message } = res.data;
        if (code === 0) {
          if (data && data !== null) {
            this.tableData = data.list || [];
            this.total = data.total || 0;
          } else {
            this.tableData = [];
          }
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.getData();
    },
    handleCurrentChange(val) {
      this.getData();
    },
    onSearch() {
      this.getData();
    },
    onReset() {
      this.searchData = {
        activityName: '',
        activityCode: '',
        startTime: '',
        endTime: '',
        deliveryType: '',
        isEverydayCutOrder: '',
        activityStatus: '',
        deliveryStatus: '',
        logisticsCompany: null,
        pageNum: 1,
        pageSize: 10
      };
      // this.$refs.form.resetFields();
    },
    openChooseActivityDialog() {
      this.chooseActivityDialog = true;
    },
    handleSelectionChange(val) {
      console.log('llllll', val);
      // this.multipleSelection = val
      this.multipleSelectionData = val;

      console.log('llllll------', this.multipleSelection);
      this.$emit('update', val);
    },
    onSubmit() {
      // this.$emit('confirm', this.multipleSelection)
      this.$emit('confirm', this.multipleSelectionData);
      this.chooseActivityDialog = false;
    },

    cleanSelected() {
      this.multipleSelectionData = {};
      this.multipleSelection = [];
    },
    async getActivityStatus() {
      const { data: { success, result } } = await baseService.activityStatus();
      if (success) {
        this.activityStatus = result;
      }
    },

    async getStatusDelivery() {
      const { data: { success, result } } = await baseService.deliveryStatus();
      if (success) {
        this.deliverStatus = result;
      }
    },

    async getDeliveryTypes() {
      const { data: { success, result } } = await baseService.deliveryTypes();
      if (success) {
        this.deliverTypes = result;
      }
    },
    async getSelect() {
      const { data: { success, result } } = await activitiesService.editGetSelect();
      if (success) {
        this.routeTypeList = result.routeTypeList;
        this.expressList = result.expressList;
        this.staffNameList = result.staffNameList;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
    .choose-issuing-wrap {
        .icon-def-check {
            width: 14px;
            height: 14px;
            border: 1px solid dodgerblue;
        }

        .icon-checked {
            width: 14px;
            height: 14px;
            background: dodgerblue;
            font-size: 12px;
            color: white;
            text-align: center;
            line-height: 14px;
        }
    }
</style>
